<!--
 * @Author: liaoxing
 * @Date: 2021-12-17 10:51:20
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-04 13:52:13
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\views\business\financial\input.vue
-->
<template>
  <div class="financialInput">
    <div class="inputBtnBox flex-align-center">
      <div>
        <el-button
          style="margin-right: 20px"
          type="primary"
          @click="inputDialogWindow = true"
          >录入数据</el-button
        >
        <el-button
          style="margin-right: 20px"
          type="primary"
          @click="runDialogWindow = true"
          >数据重跑</el-button
        >
      </div>
      <div>
        <el-select v-model="searchForm.tenantId" placeholder="请选择工厂">
          <el-option
            v-for="item in tenantIdOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          style="margin-left: 20px"
          v-model="searchForm.project"
          placeholder="请选择项目"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          style="margin-left: 20px"
          type="primary"
          @click="queryFinanceData"
          >搜 索</el-button
        >
        <el-button style="margin-left: 20px" @click="queryFinanceData('init')"
          >重 置</el-button
        >
      </div>
    </div>
    <div class="inputTableBox">
      <el-table
        v-loading="loading"
        :data="tableData"
        border  
        style="width: 100%"
      >
        <el-table-column prop="tenantId" label="工厂"></el-table-column>
        <el-table-column prop="project" label="费用项目"></el-table-column>
        <el-table-column prop="amount" label="金额"></el-table-column>
        <el-table-column label="分摊方式">
          <template slot-scope="scope">
            <span>{{ divideTypeOb[scope.row["divideType"]] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="effectStartDate"
          label="起始日期"
        ></el-table-column>
        <el-table-column
          prop="effectEndDate"
          label="结束日期"
        ></el-table-column>
        <el-table-column prop="creatorName" label="录入人"></el-table-column>
        <el-table-column prop="created" label="录入时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              class="jstarfont jstar-bianji1 finger"
              @click="editData(scope.row)"
            ></span>
            <span
              style="margin-left: 10px"
              class="jstarfont jstar-shanchutianchong finger"
              @click="deleteData(scope.row.id)"
            ></span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 20px"
        :current-page.sync="pn"
        @current-change="changePage"
        @size-change="changePage"
        :page-size.sync="ps"
        :page-sizes="[10, 15, 20, 25, 30]"
        layout="sizes, total, prev, pager, next, jumper"
        :total="totalSize">
      </el-pagination>
    </div>
    <el-dialog title="录入信息" :visible.sync="inputDialogWindow" width="37%">
      <el-form :model="inputForm" :rules="inputFormRules" ref="inputForm">
        <el-form-item label="工厂" label-width="100px" prop="tenantId">
          <el-select v-model="inputForm.tenantId" placeholder="请选择工厂">
            <el-option
              v-for="item in tenantIdOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用项目" label-width="100px" prop="project">
          <el-select v-model="inputForm.project" placeholder="请选择项目">
            <el-option
              v-for="item in projectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入金额" label-width="100px" prop="amount">
          <el-input style="width: 300px" v-model="inputForm.amount"></el-input>
        </el-form-item>
        <el-form-item label="分摊方式" label-width="100px" prop="divideType">
          <el-select v-model="inputForm.divideType" placeholder="请选择方式">
            <el-option
              v-for="item in divideTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效日期" label-width="100px" prop="chooseData">
          <el-date-picker
            v-model="inputForm.chooseData"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('inputForm')">重 置</el-button>
        <el-button type="primary" @click="submitForm('inputForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="数据重跑" :visible.sync="runDialogWindow" width="40%">
      <el-form :model="runForm" :rules="runFormRules" ref="runForm">
        <el-form-item :label="'日期'" label-width="100px" prop="chooseData">
          <el-date-picker
            v-model="runForm.chooseData"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="重跑范围" label-width="100px" prop="op">
          <el-select v-model="runForm.op" placeholder="请选择范围">
            <el-option
              v-for="item in opOPtions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('runForm')">重 置</el-button>
        <el-button type="primary" @click="submitForm('runForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="修改单据" :visible.sync="editDialogWindow" width="40%">
      <el-form :model="editForm" :rules="editFormRules" ref="editForm">
        <el-form-item
          :label="'结束日期'"
          label-width="100px"
          prop="effectEndDate"
        >
          <el-date-picker
            v-model="editForm.effectEndDate"
            type="date"
            :picker-options="pickerOptionsStart"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="resetForm('editForm')">重 置</el-button> -->
        <el-button type="primary" @click="submitForm('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import timeTrans from "@/utils/timeTrans";
export default {
  name: "financialInput",
  data() {
    return {
      ps: 15,
      pn: 1,
      totalSize: 0,
      tableData: null,
      inputDialogWindow: false,
      inputForm: {
        amount: null,
        tenantId: null,
        project: null,
        divideType: null,
        chooseData: null,
        // effectStartDate: null,
        // effectEndDate: null
      },
      tenantIdOptions: [
        { label: "龙华工厂", value: "龙华工厂" },
        { label: "盐田新工厂", value: "盐田新工厂" },
        { label: "盐田工厂", value: "盐田工厂" },
      ],
      projectOptions: window.projectOptions,
      divideTypeOptions: [
        { label: "选择日期分摊", value: "date" },
        { label: "按天分摊", value: "day" },
        { label: "按月分摊", value: "month" },
      ],
      divideTypeOb: {
        date: "选择日期分摊",
        day: "按天分摊",
        month: "按月分摊",
      },
      chooseData: null,
      inputFormRules: {
        amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
        tenantId: [
          { required: true, message: "请选择工厂", trigger: "change" },
        ],
        project: [{ required: true, message: "请选择项目", trigger: "change" }],
        divideType: [
          { required: true, message: "请选择分摊方式", trigger: "change" },
        ],
        chooseData: [
          { required: true, message: "请选择有效日期", trigger: "change" },
        ],
      },

      runDialogWindow: false,
      runForm: {
        op: null,
        chooseData: null,
        // start: null,
        // end: null
      },
      opOPtions: [
        { label: "全部", value: "all" },
        { label: "工资", value: "staffWage" },
        { label: "录入", value: "input" },
      ],
      runFormRules: {
        op: [{ required: true, message: "请选择工厂", trigger: "change" }],
        chooseData: [
          { required: true, message: "请选择有效日期", trigger: "change" },
        ],
      },

      searchForm: {
        tenantId: null,
        project: null,
      },

      loading: false,
      pickerOptionsStart: {
        disabledDate: (time) => {
          return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
        },
      },

      editDialogWindow: false,

      editForm: {
        effectEndDate: null,
      },
      editFormRules: {
        effectEndDate: [
          { required: true, message: "请选择有效日期", trigger: "change" },
        ],
      },
      currentId: null,
    };
  },
  created() {
    this.queryFinanceData();
  },
  methods: {
    changePage () {
      this.queryFinanceData()
    },
    setCellStyle(cellInfo) {
      const { row, column, rowIndex, columnIndex } = cellInfo;
      if (columnIndex === 1) {
        if (rowIndex === 1) {
          return {
            border: "1px solid gray",
            textAlign: "center",
          };
        }
      }
    },
    queryFinanceData(init) {
      let params = JSON.parse(JSON.stringify(this.searchForm));
      if (init == "init") {
        this.searchForm = { tenantId: null, project: null };
      }

      params.pn = this.pn
      params.ps = this.ps
      this.$report.queryFinanceData(init == "init" ? {} : params)
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.rows;
            this.totalSize = res.data.total * 1
          } else {
            this.$message.error(res.code + "-" + res.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    submitForm(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (name == "inputForm") {
            if (!(this.inputForm.amount * 1)) {
              this.$message.warning("录入金额只能为数字");
              return;
            }
            this.inputData();
            return;
          }
          if (name == "runForm") {
            this.runData();
            return;
          }
          if (name == "editForm") {
            this.editFinanceData();
            return;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(name) {
      this.$refs[name].resetFields();
    },
    /* 录入数据 */
    inputData() {
      let data = JSON.parse(JSON.stringify(this.inputForm));
      data.amount = (data.amount * 1).toFixed(2);
      data.effectStartDate = timeTrans.getYMD(data.chooseData[0]);
      data.effectEndDate = timeTrans.getYMD(data.chooseData[1]);
      delete data.chooseData;
      this.$report
        .addFinanceData(data)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("录入成功");
            this.queryFinanceData();
            this.inputDialogWindow = false;
          } else {
            this.$message.error(res.code + "-" + res.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    /* 数据重跑 */
    runData() {
      let data = JSON.parse(JSON.stringify(this.runForm));
      data.start = timeTrans.getYMD(data.chooseData[0]);
      data.end = timeTrans.getYMD(data.chooseData[1]);
      delete data.chooseData;
      this.$report
        .editFinanceRunData(data)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("重跑成功");
            this.runDialogWindow = false;
          } else {
            this.$message.error(res.code + "-" + res.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    /* 修改数据 */
    editData(data) {
      this.editDialogWindow = true;
      this.currentId = data.id;
    },
    /* 修改请求 */
    editFinanceData() {
      this.$report
        .editFinanceData(this.currentId, {
          effectEndDate: timeTrans.getYMD(this.editForm.effectEndDate),
        })
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("修改成功");
            this.queryFinanceData();
            this.editDialogWindow = false;
          } else {
            this.$message.error(res.code + "-" + res.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    /* 删除 */
    deleteData(id) {
      this.$confirm("此操作将删除该单据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$report
            .deleteFinanceData(id)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success("删除成功");
                this.queryFinanceData();
              } else {
                this.$message.error(res.code + "-" + res.msg);
              }
              this.loading = false;
            })
            .catch((e) => {
              this.$message.error(e.toString());
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less">
.financialInput {
  width: 100%;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 16px;
  .el-table--border,
  .el-table--group {
    border-color: rgb(168, 168, 168);
  }

  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: rgb(168, 168, 168);
  }

  .el-table td,
  .el-table--border th,
  .el-table th.is-leaf {
    border-bottom-color: rgb(168, 168, 168);
  }

  .el-table--border td,
  .el-table--border th {
    border-right-color: rgb(168, 168, 168);
  }
  .inputBtnBox {
    height: 60px;
    justify-content: space-between;
    padding: 0 16px;
  }
  .inputTableBox {
    height: calc(100% - 60px);
    width: 100%;
  }
}
</style>
